@charset "utf-8";

main {
    overflow-y: scroll;

    flex: 1;

    // 轮播
    .swiper-container {
        width: 100%;
        height: 200px;

        img {
            width: 100%;
        }
    }

    // 内容模块
    .index-content {
        padding: 0 15px 20px 15px;

        section {
            margin-top: 20px;
        }

        section
        > div {
            border-radius: 15px;
            padding: 15px;
        }

        // 今日排名
        .rank {
            margin-right: 15px;
            height: 150px;

            background-color: #6ac3ec;
            background-image: url(../images/index-card-rank.png);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 110px;

            flex: 2;

            h3 {
                font: bold 20px/20px "微软雅黑";

                color: #003b57;
            }

            p {
                font: bold 34px/100px "微软雅黑";
                text-align: right;

                color: #fff;
            }
        }

        // 累计打卡
        .clock {
            height: 150px;

            background-color: #9fd9f8;
            background-image: url(../images/index-card-sum.png);
            background-repeat: no-repeat;
            background-position: 10px center;
            background-size: 110px;

            flex: 3;

            h3 {
                font: bold 20px/20px "微软雅黑";

                color: #005177;
            }

            button {
                float: right;

                margin-top: 50px;
                border: 3px solid #005177;
                border-radius: 20px;
                width: 110px;
                height: 40px;

                font: bold 16px/24px "微软雅黑";
                text-align: center;

                color: #005177;
                background-color: transparent;
            }
        }

        // 运动数据
        .data {
            margin-right: 15px;
            height: 110px;

            background-image: url(../images/index-card-data.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;

            flex: 1;

            h3 {
                font: bold 16px/16px "微软雅黑";

                color: #fff;
            }
        }

        // 运动徽章
        .badge {
            height: 110px;

            background-color: #9dbde3;
            background-image: url(../images/index-card-badge.png);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 100px;

            flex: 1;

            h3 {
                font: bold 16px/16px "微软雅黑";

                color: #005177;
            }

            p {
                font-weight: bold;
                text-align: right;

                color: #005177;

                span {
                    font: bold 60px/60px "微软雅黑";
                }
            }
        }

        // 课程训练
        .train {
            height: 110px;

            background-image: url(../images/index-card-train.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;

            flex: 1;

            h3 {
                font: bold 16px/16px "微软雅黑";

                color: #fff;
            }
        }

        // 户外跑步
        .run {
            height: 110px;

            background-image: url(../images/index-card-run.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-size: cover;

            flex: 1;

            h3 {
                font: bold 16px/16px "微软雅黑";

                color: #fff;
            }
        }
    }
}
